<template>
	<view>
		<my-navbar title="成员"></my-navbar>
		<view class="app-fixed">
			<view class="memberList-topbar">
				<view v-for="(i, j) in data" :key="j" @click="clickTopbar(j)" class="topbar-item" :class="[current == j ? 'selected' : '']">{{ i.text }}（{{ i.count }}人）</view>
			</view>
		</view>
		<view class="app-offset"><view class="memberList-topbar"></view></view>
		<template v-if="code">
			<template v-if="currentList.length">
				<view class="app-background"></view>
				<view class="memberList-list">
					<view v-for="(i, j) in currentList" :key="j" class="list-item">
						<template v-if="current == 0">
							<view class="item-content teacher">
								<image class="content-photo" :src="i.teacherPhoto ? i.teacherPhoto : '/static/my/headicon_none.png'" mode="aspectFill"></image>
								<view class="content-name">{{ i.teacherUserName }}</view>
								<view class="content-post">{{ teacherNamed(i) }}</view>
							</view>
						</template>
						<template v-if="current == 1">
							<view class="item-content student">
								<image class="content-photo" :src="i.studentPhoto ? i.studentPhoto : '/static/my/headicon_none.png'" mode="aspectFill"></image>
								<view class="content-name">{{ i.childName }}</view>
								<view class="content-message">关联家长：{{ i.familyNumber }}人</view>
							</view>
						</template>
						<template v-if="current == 2">
							<view class="item-content parent">
								<image class="content-photo" :src="i.familyPhoto ? i.familyPhoto : '/static/my/headicon_none.png'" mode="aspectFill"></image>
								<view class="content-name">
									<text>{{ i.childName }}</text>
									<text class="content-named">（{{ i.relation }}）</text>
								</view>
							</view>
						</template>
						<view class="item-line"></view>
					</view>
				</view>
				<view v-if="currentList.length > 6" class="page-nomore">---没有更多了---</view>
			</template>
			<template v-else>
				<view class="memberList-none">
					<image class="none-image" src="/static/my/image_none.png"></image>
					<view class="none-text">暂无数据</view>
				</view>
			</template>
		</template>
		<safe-area></safe-area>
	</view>
</template>

<script>
export default {
	data() {
		return {
			data: {
				0: {
					text: '老师',
					count: '--',
					list: []
				},
				1: {
					text: '学生',
					count: '--',
					list: []
				},
				2: {
					text: '家长',
					count: '--',
					list: []
				}
			},
			current: null,
			pageSize: 10,
			pageCount: 0,
			squad: '',
			pageNo: 1,
			code: 0
		};
	},
	computed: {
		currentData() {
			return this.data[this.current] || {};
		},
		currentList() {
			return this.currentData.list || [];
		},
		teacherNamed() {
			return teacher =>{
				switch (teacher.educationIdentity) {
					case 'class_teacher':
						return '班主任';
					case 'headmaster':
						return '校长';
					case 'subject_teacher':
						return teacher.teachSubject + '老师';
					default:
						return '';
				}
			}
		}
	},
	watch: {
		current() {
			uni.pageScrollTo({
				scrollTop: 0
			});
			try {
				this.getList(true);
			} catch (err) {}
		}
	},
	methods: {
		clickTopbar(id) {
			this.current = id;
		},
		// 设置成员人数
		setCount() {
			return new Promise(async (reslove, reject) => {
				const page = {
					pageNo: 1,
					pageSize: 1
				};
				const data = {
					squad: this.squad
				};
				const pros = [];
				pros.push(this.$api.common.get_teacher_list({ page, data }).catch(err => err));
				pros.push(this.$api.common.get_student_list({ page, data }).catch(err => err));
				pros.push(this.$api.common.get_family_list({ page: {}, data }).catch(err => err));
				let res1;
				try {
					res1 = await Promise.all(pros);
					for (const i in res1) {
						const res = res1[i];
						if (res.status === 0) continue;
						this.data[i].count = res.result.count;
					}
					const err = res1.find(i => i.status === 0);
					if (err) throw err;
				} catch (err) {
					return reject(err);
				}
				reslove();
			});
		},
		// 获取成员列表
		async getList(ifRefresh) {
			if (ifRefresh) {
				this.pageCount = 0;
				this.pageNo = 1;
			}
			if (this.pageCount !== 0 && this.pageNo >= this.pageCount + 1) {
				this.$showToast('已加载全部成员数据');
				return;
			}
			const page = {
				pageNo: this.pageNo,
				pageSize: this.pageSize
			};
			const data = {
				squad: this.squad
			};
			uni.showLoading({
				mask: true
			});
			let res1;
			try {
				if (this.current == 0) res1 = await this.$api.common.get_teacher_list({ page, data });
				if (this.current == 1) res1 = await this.$api.common.get_student_list({ page, data });
				if (this.current == 2) res1 = await this.$api.common.get_family_list({ page, data });
			} catch (err) {
				this.code = err.code;
				uni.hideLoading();
				this.$showToast(err.message || '获取成员数据失败');
				return;
			}
			this.code = res1.code;
			this.pageCount = res1.result.pageCount;
			this.currentData.count = res1.result.count;
			if (ifRefresh) {
				this.currentData.list = [];
			}
			this.currentData.list.push(...res1.result.data);
			uni.hideLoading();
		}
	},
	async onLoad(options) {
		this.squad = options.squad;
		uni.showLoading({
			mask: true
		});
		let res1;
		let err1;
		try {
			res1 = await this.setCount();
		} catch (err) {
			err1 = err;
		}
		uni.hideLoading();
		if (err1) this.$showToast(err1.message || '获取成员人数失败');
		// tip：通过改变页面参数 current 可以聚焦到指定 tab
		this.current = options.current || 0;
	},
	async onPullDownRefresh() {
		await this.getList(true);
		uni.stopPullDownRefresh();
	},
	onReachBottom() {
		this.pageNo++;
		this.getList();
	}
};
</script>

<style lang="less" scoped>
.page-nomore {
	padding: 15rpx 0;

	font-size: 24rpx;
	text-align: center;
	color: #7f7f7f;
}

.memberList-topbar {
	height: 100rpx;
	background-color: #ffffff;

	display: flex;
	align-items: center;
	border-bottom: 2rpx solid #e3e4e6;

	.topbar-item {
		height: 100%;
		flex: 1;

		font-size: 32rpx;
		color: #222222;

		display: flex;
		align-items: center;
		justify-content: center;

		margin-bottom: 8rpx;

		&.selected {
			margin-bottom: 0rpx;
			border-bottom: 8rpx solid #ff6600;
			color: #ff6600;
		}
	}
}

.memberList-list {
	background-color: #ffffff;

	.list-item {
		.item-content {
			display: flex;
			align-items: center;
			padding: 30rpx;

			.content-photo {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				margin-right: 30rpx;
			}

			.content-name {
				flex: 1;

				font-size: 36rpx;
				color: #222222;

				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			&.teacher {
				.content-post {
					border: 2rpx solid #ff6600;
					border-radius: 8rpx;
					margin-left: 20rpx;

					padding: 5rpx 20rpx;
					font-size: 28rpx;
					color: #ff6600;
				}
			}
			&.student {
				.content-name {
					flex: 1;
				}
				.content-message {
					font-size: 32rpx;
					color: #707070;
				}
			}
			&.parent {
				.content-named {
					font-size: 32rpx;
					color: #808080;
				}
			}
		}
		.item-line {
			height: 2rpx;
			background-color: #eeeeee;
			margin-left: 144rpx;
		}

		&:last-child {
			.item-line {
				background-color: transparent;
			}
		}
	}
}

.memberList-none {
	margin-top: 70rpx;

	display: flex;
	flex-direction: column;
	align-items: center;

	position: absolute;
	left: 50%;
	top: 45%;
	transform: translate(-50%, -50%);
	.none-image {
		width: 300rpx;
		height: 300rpx;
	}
	.none-text {
		margin-top: 60rpx;

		font-size: 28rpx;
		color: #707070;
	}
}
</style>
